<template>
  <div class="area" :class="[noPadding ? 'no-padding' : 'with-padding']">
    <div
      class="emptyImage"
      :style="{
        backgroundImage: `url(${require('_a/userImages/' +
          (colorType == 0
            ? 'empty'
            : colorType == 1
            ? 'empty-g'
            : colorType == 2
            ? 'empty-b'
            : 'empty-p') +
          '@2x.png')})`,
      }"
    ></div>
    <span class="content">{{ content }}</span>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
export default {
  name: "emptyState",
  props: {
    content: {
      type: String,
      default: "抱歉，暂无数据",
    },
    noPadding: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      colorType: 0,
    };
  },
  mounted() {
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.area {
  width: 100%;

  .emptyImage {
    @include size(366px, 199px);
    @include bg-setting("empty", cover, center);
    margin-bottom: 29px;
  }

  .content {
    color: #999999;
    line-height: 14px;
  }
}
.with-padding {
  @include flx(col, null, c);
  min-height: 600px;
  padding-top: 150px;
}
.no-padding {
  @include flx(col, c, c);
}
</style>
